<template>
  <div class="ver-layout-center">
    <div class="header-title" v-if="showTitle.showTitle">
      <div class="back-btn-layout" v-if="showBack">
        <button @click="backPage" class="back-btn">返回</button>
      </div>
      <div style="font-weight: bold;color: white">{{ showTitle.title }}</div>
      <a v-if="showBack" class="project-link" href="https://gitee.com/zyjun/vue-demo">项目地址</a>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {}
  },
  computed: {
    showBack() {
      let routePath = this.$route.fullPath || ""
      console.log("route", routePath)
      let blackList = ["/home", "/groupUser", "/groupUserNew", '/manageUser']
      return !blackList.find(item => routePath.indexOf(item) !== -1)
    },
    showTitle() {
      let route = this.$route
      let {showTitle, title} = route.meta
      console.log("route", route, showTitle)
      return {showTitle, title}
    }
  },
  methods: {
    backPage() {
      this.$router.back()
    }
  }
}
</script>

<style>
.header-title {
  height: 40px;
  line-height: 40px;
  background: #40B781;
  width: 100%;
  text-align: center
}

.back-btn-layout {
  position: absolute;
  left: 20px;
}

.project-link {
  position: absolute;
  top: 0px;
  right: 20px;
}
</style>
